<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <!-- 禁止数字串被处理为电话号码 -->
  <meta name="format-detection" content="telephone=no">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
  <title>超级会员充值</title>



  <script>

    function getUrlAllParams(url) {//得到url上所有参数
      var params = {};
      if (url.lastIndexOf("?") != -1) {
        var str = url.substr(url.lastIndexOf("?")+1);
        var strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
          params[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
        }
      }
      return params;
    }

    function ismobile() {

      var u = navigator.userAgent, app = navigator.appVersion;

      if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1)
        return 1;
      else if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/))
        return 2;
      else
        return 0;

    };

    function goApp() {//去App

      var platform = ismobile();

      if (platform == 1) {//android
        window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.slicejobs.ailinggong";
      } else if (platform ==2) {//ios
        window.location.href = "https://itunes.apple.com/cn/app/爱零工-兼职超轻松/id1084975169?mt=8";
      } else {
        window.location.href = "http://mcdn.slicejobs.com/public/slicejobs_app_download.html";
      }
    }



  </script>

  <style>


    .dialog-tip {
      position: fixed;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.6);
      filter: alpha(opacity=80);
      width: 100%;
      height: 100%;
      z-index: 10;
    }

    .bt_cope {
      background: -webkit-gradient(linear,left top,left right,color-stop(0,#FE3C35),color-stop(100%,#FF1F4C));
      background: -webkit-linear-gradient(left,#FE3C35 0,#FF1F4C 100%);
      background: -o-linear-gradient(left,#FE3C35 0,#FF1F4C 100%);
      background: -ms-linear-gradient(left,#FE3C35 0,#FF1F4C 100%);
      background: linear-gradient(to left,#FE3C35 0,#FF1F4C 100%);
      width: 137px;
      margin: 0 auto;
      display: block;
      border-radius: 4px;
      line-height: 40px;
      height: 40px;
      text-align: center;
      color: #fff;
      font-size: 16px;
    }

    /*LOADER-9*/
    @-webkit-keyframes stars-pulse {
      0%,  100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
      80% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
      }
    }
    @keyframes stars-pulse {
      0%,  100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
      80% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
      }
    }

    .loader { position: relative; width: 60px; height: 60px; border-radius: 50%; margin: 60% 40%; display: inline-block; vertical-align: middle; }
    .loader-star { position: absolute; top: calc(50% - 12px); }
    .loader-9 .star1 { -webkit-animation: stars-pulse 1s ease-in-out infinite; animation: stars-pulse 1s ease-in-out infinite; left: 0; }
    .loader-9 .star2 { -webkit-animation: stars-pulse 1s 0.2s ease-in-out infinite; animation: stars-pulse 1s 0.2s ease-in-out infinite; left: 25px; }
    .loader-9 .star3 { -webkit-animation: stars-pulse 1s 0.4s ease-in-out infinite; animation: stars-pulse 1s 0.4s ease-in-out infinite; left: 50px; }



  </style>


</head>
<body style="background-color: rgb(231,231,231); padding: 0px; margin: 0px">

<div id="pay">

  <div style="width: 100%; background-color: white; height: 50px; margin-top: 10px; line-height: 50px; padding-left: 20px">
    名称:&nbsp;&nbsp;{{payInfo.order_name}}
  </div>

  <div style="width: 100%; background-color: white; height: 50px; margin-top: 2px; line-height: 50px; padding-left: 20px">
    价格:&nbsp;&nbsp;{{payInfo.order_price}}元
  </div>
  <div>
    <div style="width: 100%; color: #999999; font-size: 13px; background-color: white; height: 35px; margin-top: 10px; line-height: 35px; padding-left: 20px">
      请选择支付方式
    </div>
    <div style="width: 100%; background-color: white; height: 50px; margin-top: 2px; line-height: 50px; padding-left: 20px">
      <label><input type="radio" name="payType" value="alipay" v-model="payInfo.order_type"><span style="margin-left: 10px">支付宝(推荐)</span></label>
    </div>

    <div style="width: 100%; background-color: white; height: 50px; margin-top: 2px; line-height: 50px; padding-left: 20px">
      <label><input type="radio" name="payType" value="wechat" v-model="payInfo.order_type"><span style="margin-left: 10px">微信</span></label>
    </div>

    <div @click="cretePayOrder" style="background: linear-gradient(to right,rgb(139,47,227),rgb(55,27,118));width:80%;height: 40px; line-height:40px; margin-top: 100px; border-radius:25px;text-align: center;margin-left: 10%;font-size: 14px;; color: white">

      确认支付
    </div>

  </div>

  <div v-if="orderInfo.order_type == 'alipay'" class="dialog-tip" >
    <div style="height: 250px; background-color: white; width: 80%; margin-top: 180px; margin-left: 10%; border-radius:10px">
      <div style="width: 100%; text-align: center; color:  #666; font-size: 16px; padding-top: 10px; margin-bottom: 10px"></div>
      <div id="qrcode2" style="width:100px; height:100px; margin-left: 32% "></div>
      <div style="line-height: 28px;color: #999;font-size: 12px; padding-bottom: 10px;text-align: center">请点击去支付,若无法跳转请支付宝扫描二维码</div>
      <div  class="bt_cope"><a href="#" id="goA" style="color: white;text-decoration:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;去支付&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
    </div>
    <div style="margin-top: 50px; width: 100%; text-align: center">
      <image src="icon_close.png" style="height: 33px; width: 33px" @click="goAlipay()"></image>
    </div>
  </div>

  <div v-if="orderInfo.order_type == 'wechat'" class="dialog-tip" >
    <div style="height: 250px; background-color: white; width: 80%; margin-top: 180px; margin-left: 10%; border-radius:10px">
      <div style="width: 100%; text-align: center; color:  #666; font-size: 16px; padding-top: 10px; margin-bottom: 10px">
      </div>
      <div id="qrcode" style="width:100px; height:100px; margin-left: 32% "></div>
      <div style="line-height: 28px;color: #999;font-size: 12px; padding-bottom: 10px;text-align: center">请微信扫描上方二维码支付</div>
      <div  class="bt_cope" @click="goAlipay">我明白了</div>
    </div>
  </div>




  <div class="fixbox" style="display: none; position: fixed; top: 50%; left: 50%; background: #000; opacity: .8; transform: translate(-50%,-50%); width: 200px; height: 50px; border-radius: 5px; text-align: center;line-height: 50px; color:#fff; z-index: 100; " >
  </div>


  <div style="position: absolute; bottom: 0px;">
    <div style="line-height: 20px;color: #999;font-size: 12px;">提示</div>
    <div style="line-height: 20px;color: #999;font-size: 12px;">
      1.支付宝若无法正常唤起，可切换微信支付。
      </br>
      2.微信支付仅支持显示收款二维码，请自行扫描或则保存相册，移至微信长按识别支付。
      </br>
      3.<span style="color: firebrick">(重要)</span>充值成功后，请自行到App刷新或重新登录确认到账。
      </br>
      如未到账，请联系管理员微信:keller-zhou
    </div>
  </div>

</div>



<div style="height:100%; width:100%; z-index:100; position: absolute;top: 0;left: 0;right: 0;bottom: 0; background-color: white; font-size: 16px" id="inPageLoading">

  <div class="loader loader-9" >
    <svg class="loader-star star1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="23.172px" height="23.346px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon fill="#c6ff00" points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9" />
         </svg>
      <svg class="loader-star star2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="23.172px" height="23.346px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon fill="#c6ff00" points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9  " />
         </svg>
      <svg class="loader-star star3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="23.172px" height="23.346px" viewBox="0 0 23.172 23.346" xml:space="preserve">
            <polygon fill="#c6ff00" points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9  " />
         </svg>
  </div>

</div>


</body>


<script>
  var vm = new Vue({
    el:'#pay',
    data: {
      payInfo:{
        order_name:'每天都是新的一天 Good Luck ~',
        order_price:'0.10',
        order_type:'alipay',
        user_id:'',
        user_name:''

      },
      orderInfo:{

      }

    },
    methods: {
      cretePayOrder: function() {
        var self = this;
        var  url = "http://tmsj.taomiwo.top/pay/payapi.php"
        var param = {user_id: this.payInfo.user_id, user_name:this.payInfo.user_name, order_name:this.payInfo.order_name, order_type:this.payInfo.order_type, order_price:this.payInfo.order_price}


        jQuery.ajax({
          url: url,
          type: "get",
          data:param,
          success: function (res) {
            var orderResult = JSON.parse(res)
            console.log(orderResult)
            if (orderResult.order_type == 'alipay' ) {
              self.orderInfo = orderResult;
              setTimeout(function() {
                document.getElementById("goA").href=self.orderInfo.qr_url;
                self.makeCode2(self.orderInfo.qr_url);
              }, 200)

            }  else if (orderResult.order_type == 'wechat') {
              self.orderInfo = orderResult;
              setTimeout(function() {
                self.makeCode(self.orderInfo.qr_url);

              }, 200)
            } else {//创建订单失败了
              if (orderResult.msg == '') {
                self.toast("当前充值太火爆，等不及了可联系管理员充值。")
              } else {
                self.toast(orderResult.msg)

              }
            }
          },
          error:function (res) {


          }
        })
      },

      goAlipay: function() {
        this.orderInfo = {};

      },
      makeCode:function(str) {
        var qrcode = new QRCode(document.getElementById("qrcode"), {
          width : 100,
          height : 100
        });

        qrcode.makeCode(str);
      },

      makeCode2:function(str) {
        var qrcode = new QRCode(document.getElementById("qrcode2"), {
          width : 100,
          height : 100
        });

        qrcode.makeCode(str);
      },



      toast:function(txt) {
        $(".fixbox").html(txt).css({'display':'block'})
        setTimeout(function () {
          $(".fixbox").html(txt).css({'display':'none'})
        },2000)
      }


    },
    created: function() {
      var url = decodeURI(window.location.href)
      //http://tmsj.taomiwo.top/pay/index.html?user_id=2&user_name=17612162770&order_price=6&order_name=升级超级会员1个月
      var urlParams = getUrlAllParams(url);
      if (urlParams.order_name != undefined) {
        this.payInfo.order_name = urlParams.order_name
      }

      if (urlParams.order_price != undefined) {
        this.payInfo.order_price = urlParams.order_price
      }

      if (urlParams.user_id != undefined) {
        this.payInfo.userid = urlParams.user_id;
      }

      if (urlParams.user_name != undefined) {
        this.payInfo.user_name = urlParams.user_name;
      }


      setTimeout(function() {
        $("#inPageLoading").fadeOut();
      }, 1200)

    }
  });

</script>
</html>